<template>
  <view class="imgSelect-container">
    <customtop top_title="添加链接和截图"></customtop>
    <view class="content">
      <view class="item">
        <view class="left">
          <view class="title"> 标题（选填） </view>
          <view class="input">
            <input
              class="text-input"
              type="text"
              placeholder-class="input-placeholder"
              placeholder="请填写您的项目链接"
              v-model="lianjie"
            />
          </view>
        </view>
      </view>
      <view class="img-item">
        <view class="left">
          <view class="title"> 截图（选填，最多9张） </view>
          <view class="input">
            <view class="text">上传合作相关截图，禁止上传联系方式。</view>
          </view>
        </view>
        <view class="content">
          <view class="img-box" @click="chooseImg">
            <u-icon name="plus" color="#8799a3" size="20"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <bottomBtn @submit="submit"></bottomBtn>
  </view>
</template>

<script>
import customtop from "@/components/customtop.vue";
import bottomBtn from "@/components/bottomBtn.vue";
export default {
  components: {
    customtop,
    bottomBtn,
  },
  data() {
    return {
      imgList: [],
      lianjie: null,
    };
  },
  methods: {
    chooseImg() {
      uni.chooseImage({
        count: 6, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: function (res) {
          console.log(JSON.stringify(res.tempFilePaths));
        },
      });
    },
    upload() {},
    submit() {
      const pages = getCurrentPages();
      const perver = pages[pages.length - 2];
      perver.$vm.form.lianjie = this.lianjie;
      // perver.$vm.form.jietu = this.imgList;
      uni.navigateBack({
        detail: 1,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  padding: 20rpx;
  box-sizing: border-box;
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #f5f5f5;
    .left {
      .input-placeholder {
        font-size: 26rpx;
        color: #7b7b7b;
      }
      .title {
        margin-top: 15rpx;
        font-size: 26rpx;
      }
      .text-input {
        height: 80rpx;
      }

      .text {
        height: 80rpx;
        line-height: 80rpx;
        font-size: 25rpx;
        color: #b5b5b5;
      }
    }
  }
  .img-item {
    .left {
      .input-placeholder {
        font-size: 26rpx;
        color: #7b7b7b;
      }
      .title {
        margin-top: 15rpx;
        font-size: 26rpx;
      }
      .text-input {
        height: 80rpx;
      }

      .text {
        height: 80rpx;
        line-height: 80rpx;
        font-size: 25rpx;
        color: #b5b5b5;
      }
    }
    .content {
      .img-box {
        height: 250rpx;
        width: 250rpx;
        background-color: #f0f0f0;
        display: flex;
        justify-content: center;
        align-content: center;
      }
    }
  }
}
</style>
<style>
page {
  background-color: #fff;
  height: 100%;
}
</style>
